<script lang="ts" setup>
function disabledDate(time: Date) {
  return time.getTime() > Date.now()
}

const shortcuts = ref([
  {
    text: '今天',
    value: new Date(),
  },
  {
    text: '昨天',
    value: (() => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    })(),
  },
  {
    text: '一周前',
    value: (() => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    })(),
  },
])

const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
const value4 = ref('')
const value5 = ref('')
const value6 = ref('')
const value7 = ref('')
const value8 = ref('')
</script>

<template>
  <div>
    <ComponentBasicExampleAlert />
    <page-main title="选择日" class="demo">
      <div>默认</div>
      <el-date-picker v-model="value1" type="date" placeholder="选择日期" />
      <div>带快捷选项</div>
      <el-date-picker v-model="value2" align="right" type="date" placeholder="选择日期" :disabled-date="disabledDate" :shortcuts="shortcuts" />
    </page-main>
    <page-main title="其他日期单位" class="demo">
      <div>周</div>
      <el-date-picker v-model="value3" type="week" format="gggg 第 ww 周" placeholder="选择周" />
      <div>月</div>
      <el-date-picker v-model="value4" type="month" placeholder="选择月" />
      <div>年</div>
      <el-date-picker v-model="value5" type="year" placeholder="选择年" />
      <div>多个日期</div>
      <el-date-picker v-model="value6" type="dates" placeholder="选择一个或多个日期" />
    </page-main>
    <page-main title="选择日期范围" class="demo">
      <el-date-picker v-model="value7" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
    </page-main>
    <page-main title="选择月份范围" class="demo">
      <el-date-picker v-model="value8" type="monthrange" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" />
    </page-main>
  </div>
</template>
